<template>
	<div class="grid-container">
		<div class="search-form">
			<el-form :inline="true" :model="query">
				<el-form-item label="名称">
					<el-input v-model="query.LineNo" placeholder="行号"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="doSeach">查询</el-button>
					<el-button @click="doClear">清空</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="grid-toolbar">
			<button class="tool-btn btn-add" @click="stockOut">出库</button>
		</div>
		<div class="grid-content">
			<el-table :data="tableData" v-loading.body="loading" @selection-change="handleSelectionChange" stripe style="width: 100%">
				<el-table-column type="selection" width="55">
				</el-table-column>
				<el-table-column prop="OrderNo" label="受注编号" min-width="200">
				</el-table-column>
				<el-table-column prop="PlaceCD" label="出库编号" min-width="200">
				</el-table-column>
				<el-table-column prop="ApplyNo" label="申请单编号" min-width="200">
				</el-table-column>
				<el-table-column prop="ShopAdr" label="送货地" min-width="200">
				</el-table-column>
				<el-table-column fixed="right" label="操作" min-width="50" class-name="action-column">
					<template slot-scope="scope">
						<div class="action-column">
							<el-button type="text" size="small" @click.native.prevent="showDetail(scope.row)">
								查看
							</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="grid-page">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="query.page" :page-sizes="[10, 20, 50, 100]" :page-size="query.limit" layout="total,->, prev, pager, next, jumper, sizes" :total="total">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	import { fetchList } from '@/api/picking'

	export default {
		name: 'rolelist',
		data: function() {
			return {
				query: {
					page: 1,
					limit: 20,
					LineNo: '',
					sort: 'id'
				},
				loading: true,
				tableData: [],
				total: 0,
				checked: []
			}
		},
		mounted: function() {
			this.loadData()
		},
		methods: {
			loadData: function() {
				fetchList(this.query).then(res => {
					this.tableData = res.data.data
				this.total = res.data.total
			})
				this.loading = true
				setTimeout(() => {
					this.loading = false
			}, 1000)
			},
			doSeach: function() {
				this.query.page = 1
				this.loadData()
			},
			doClear: function() {
				this.query.LineNo = ''
			},
			handleSelectionChange(val) {
				this.checked = val
			},
			handleSizeChange: function(val) {
				this.query.limit = val
				this.loadData()
			},
			handleCurrentChange: function(val) {
				this.query.page = val
				this.loadData()
			},
			showDetail: function(detail) {
				this.$router.push({
					path: '/outstorage_action/picking/detail/' + detail.OrderNo
				})
			},
			stockOut() {
				if (this.checked.length === 0) {
					this.$message({
						message: '请选择出库单',
						type: 'warning'
					})
					return
				}
				let ids = []
				for (let i = 0; i < this.checked.length; i++) {
					ids.push(this.checked[i].OrderNo)
				}
				this.$router.push({
					path: '/outstorage_action/picking/out',
					query: ids
				})
			}
		}
	}
</script>
<style lang="less">
	.grid-container {
		height: auto;
		overflow: hidden;
	.action-column {
		text-align: right;
	}
	.color-gred {
		color: #999;
	}
	}
	.el-dialog--dl-small {
		width: 600px;
	}
</style>